<template>
  <view>
    <navigator class="back" open-type="navigateBack">
      <view class="iconfont icon-shouye-copy"></view>
    </navigator>
    <swiper class="swiper" indicator-dots autoplay interval="1000" circular>
      <!-- 轮播图 -->
      <swiper-item
        class="swiper_wrapper"
        v-for="(item, index) in showInfo.pics"
        :key="item.pics_id"
      >
        <image
          class="swpier_pic"
          :src="item.pics_sma_url"
          mode="aspectFit"
          @tap="previewImage(index)"
        />
      </swiper-item>
    </swiper>
    <!-- 详情介绍 -->
    <view class="goods_text">
      <view class="share">
        <text class="price"> {{ showInfo.goods_price }}</text>
        <view class="opentype_wrapper iconfont icon-shoucang1">
          <button class="button" open-type="share">分享</button>
        </view>
        <view @tap="collect" class="iconfont icon-zhuanfa"></view>
      </view>
      <text class="goods_name">{{ showInfo.goods_name }}</text>
    </view>
    <!-- 描述 -->
    <view class="descript">
      <text class="descript_title">图文详情</text>
      <rich-text :nodes="showInfo.goods_introduce"></rich-text>
    </view>
    <!-- bottom -->
    <view class="bottom">
      <view class="icon_item opentype_wrapper">
        <button class="button" open-type="contact">林欣客服</button>
        <view class="iconfont icon-kefu"></view>
        <text class="text">联系客服</text>
      </view>
      <navigator open-type="switchTab" url="/pages/cart/main" class="icon_item">
        <view class="iconfont icon-gouwuche"></view>
        <text class="text">购物车</text>
      </navigator>
      <button @tap="addCart">加入购物车</button>
      <button>立即购买</button>
    </view>
  </view>
</template>

<script>
import { getGoodsDetail } from "@/api/goodsDetail";
export default {
  data() {
    return {
      goodsId: "",
      showInfo: {
        goods_name: "",
        goods_price: "",
        goods_introduce: "",
        pics: "",
      },
      cartInfo: {},
    };
  },
  onLoad(query) {
    this.goodsId = query.goods_id;
    this.getGoodsInfo();
  },

  methods: {
    async getGoodsInfo() {
      const res = await getGoodsDetail({ goods_id: this.goodsId });
      const {
        goods_introduce,
        goods_price,
        goods_name,
        goods_big_logo,
        pics,
        goods_id,
        goods_small_logo,
      } = res.data.message;
      this.showInfo = {
        goods_introduce,
        goods_price,
        goods_name,
        goods_big_logo,
        pics,
      };
      this.cartInfo = {
        goods_price,
        goods_name,
        goods_id,
        goods_small_logo,
      };
      const { system } = uni.getSystemInfoSync();
      const isIOS = system.toLowerCase().includes("ios");
      this.showInfo.goods_introduce = this.showInfo.goods_introduce.replace(
        /<img/g,
        "<img class='goods_pic'"
      );
      if (isIOS) {
        this.showInfo.goods_introduce = this.showInfo.goods_introduce.replace(
          /\.webp/g,
          ".jpg"
        );
      }
    },
    previewImage(index) {
      const urls = this.showInfo.pics.map((item) => item.pics_big_url);
      wx.previewImage({
        current: index, // 当前显示图片的http链接
        urls, // 需要预览的图片http链接列表
      });
    },
    addCart() {
      

     const cartList =uni.getStorageSync('cartList') || []
      const index = cartList.findIndex(item=> item.goods_id == this.goodsId)
      if(index === -1){
         cartList.push({
       ...this.cartInfo,
       goods_selected:true,
       goods_count:1
     })
      }else{
        cartList[index].goods_count++
      }
    
      uni.setStorageSync("cartList", cartList);
      uni.showToast({
        title: '加入成功',
        duration: 2000,
        mask:true
      });
    },
    collect() {
      uni.showToast({
        title: "收藏中……",
        duration: 1000,
        icon: "none",
      });
    },
  },
};
</script>

<style lang="less" >
.back {
  width: 70rpx;
  height: 70rpx;
  left: 20rpx;
  position: fixed;
  top: 60rpx;
  z-index: 20;
  background-color: rgba(0, 0, 0, 0.144);
  border-radius: 35rpx;
  text-align: center;
  line-height: 70rpx;
  .icon-shouye-copy {
    color: #fff;
  }
}
.opentype_wrapper {
  position: relative;
  overflow: hidden;
  .button {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}
.swiper {
  width: 750rpx;
  height: 750rpx;
  .swiper_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    .swpier_pic {
      width: 750rpx;
      height: 750rpx;
    }
  }
}
.goods_text {
  padding: 20rpx;
  .share {
    display: flex;
    justify-content: space-between;
    .price {
      flex: 1;
      font-size: 36rpx;
    }
    .iconfont {
      // overflow: hidden;
      margin: 0 10rpx;
    }
  }
  .goods_name {
    font-size: 30rpx;
  }
}
.descript {
  .descript_title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
  }
}
.bottom {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #fff;
  width: 750rpx;
  height: 94rpx;
  position: fixed;
  bottom: 0;
  .icon_item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    .iconfont {
    }
    .text {
      font-size: 10rpx;
    }
  }
  button {
    margin: 0 15rpx;
    width: 196rpx;
    height: 60rpx;
    background-color: #ea4350;
    line-height: 60rpx;
    text-align: center;
    font-size: 30rpx;
    color: #fff;
    border-radius: 30rpx;
  }
}
.goods_pic {
  display: block;
}
</style>